<template>
	<view class="mine">
		<view class="mains">
			<view class="items">
				<view class="title">头像</view>
				<view class="mes">
					<view class="imgs">
						<image :src="mineList.avatar"></image>
					</view>
					
				</view>
			</view>
			
			<view class="items">
				<view class="title">用户名</view>
				<view class="mes">
					{{mineList.username}}
				</view>
			</view>
			
			<view class="items">
				<view class="title">昵称</view>
				<view class="mes">
					{{mineList.nickname}}
				</view>
			</view>
			
			<view class="items">
				<view class="title">手机号</view>
				<view class="mes">
					{{mineList.tel}}
				</view>
			</view>
		</view>
		<view class="btns" @tap="btnClick">退出登录</view>
	</view>
</template>

<script>
	import {getDoLogout} from '@/network/profile/index.js'
	export default {
		data() {
			return {
				mineList: {}
			};
		},
		onLoad() {
			this.mineList = uni.getStorageSync('tokens');
			console.log(this.mineList)
		},
		methods: {
			async btnClick() {
				const res = await getDoLogout()
				console.log(res)
				if (res.data.code == 'S') {
					uni.removeStorageSync('tokens')
					// uni.showToast({
					// 	title: '已退出登录'
					// })
					uni.showLoading({
						title: '退出中'
					})
					setTimeout(() => {
						uni.hideLoading();
						
						uni.switchTab({
							url: '/pages/profile/profile'
						})
					}, 500)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
.mine {
	height: 100vh;
	overflow: auto;
	background-color: #F1ECE7;
	.btns {
		position: fixed;
		left: 50%;
		bottom: 100rpx;
		transform: translateX(-50%);
		padding: 20rpx 100rpx;
		background-color: #1C4B47;
		color: #fff;
		border-radius: 16rpx;
	}
	.mains {
		padding: 40rpx;
		.items {
			height: 120rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 10rpx 0;
			border-bottom: 2rpx solid #E8E7E5;
			.title {
				color: #494949;
			}
			.mes {
				height: 120rpx;
				display: flex;
				align-items: center;
				color: #A9A1A1;
				.imgs {
					width: 120rpx;
					height: 120rpx;
					border-radius: 50%;
					overflow: hidden;
					image {
						width: 100%;
						height: 100%;
					}
				}
			}
		}
	}
	
}
</style>
